<template>
  <div class="container-box">
    <div class="title">直播实时带宽</div>
    <GaugeTop :nodes="streams" />
    <GaugeBottom :nodes="streams"  />
  </div>
</template>
<script lang="ts">
import { defineComponent, watch, ref } from 'vue';
import GaugeTop from './gauge-top.vue';
import GaugeBottom from './gauge-bottom.vue';
export default defineComponent({
    name: "LineEchart",
    components: { GaugeTop, GaugeBottom },
    props: {
      nodes: {
        type: Object,
        default: () => { return [] } 
      }
    },
    setup(props) {
      const streams: any = ref([])
      watch(
          () => props.nodes,
          (old, val) => {
            if( val && old !== val) {
              streams.value = old;
            }
          },
          { immediate: true, deep: true }
      );
      return {
        streams
      }
    }
})

</script>
<style lang="scss" scoped>
.container-box{
  height: 150px;
  width: 200px;
  .title{
    font-weight: bold;
    color: #464646;
  }
}
</style>